<template>
  <div>
    <el-dialog v-model="dialogVisible" title="发送邮件" width="30%">
      <div style="height: 50px">
        <span style="margin: 10px">选择用户:</span>
        <el-select v-model="selectedUserId" placeholder="选择用户">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          >
            <img
              style="float: left; width: 30px; height: 30px"
              fit="cover"
              :src="item.iconUrl"
            />
            <span style="float: right">{{ item.username }}</span></el-option
          >
        </el-select>
      </div>

      <div class="dialog-input">
        <span class="label">邮件内容:</span
        ><el-input
          v-model="content"
          style="width: 300px"
          :autosize="{ minRows: 2, maxRows: 8 }"
          type="textarea"
          placeholder="输入邮件内容"
        />
      </div>
      <div style="width: 100%; text-align: center">
        <FilesUpload
          v-model:uidList="uidList"
          v-model:files="files"
          :uploadType="4"
          label="选择图片"
          ref="fileRef"
        ></FilesUpload>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSend"> 确定 </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import FilesUpload from "@/view/components/files-upload.vue";
import { uploadFile } from "@/api/file";
import { addUserSendEmailContent, getListUserInfo } from "@/api/user";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const emits = defineEmits(["getUserList"]);
const fileRef = ref();

const uidList = ref([]);
const files = ref([]);
const urlList = ref<string>("");
const uidNameList = ref<string[]>([]);
const handleSend = async () => {
  if (!selectedUserId.value) {
    ElMessage({
      message: "请选择用户",
      type: "error",
    });
    return;
  }
  if (!content.value && files.value.length === 0) {
    ElMessage({
      message: "请输入内容",
      type: "error",
    });
    return;
  }
  if (userStore.userDesc.id === selectedUserId.value) {
    ElMessage({
      message: "不能发送给自己",
      type: "error",
    });
    return;
  }
  urlList.value = "";
  uidList.value.forEach(
    (item: { pictureRealPath: string; uuidName: string }) => {
      urlList.value += item.pictureRealPath;
    }
  );
  uidNameList.value = [];
  uidList.value.forEach(
    (item: { pictureRealPath: string; uuidName: string }) => {
      uidNameList.value.push(item.uuidName);
    }
  );

  uidNameList.value.forEach(async (item: string, index: number) => {
    await uploadFile(files.value[index], item, 4).then(() => {});
  });
  await addUserSendEmailContent({
    content: content.value,
    messageType: 1,
    pictureUrl: urlList.value,
    receiveUserId: selectedUserId.value,
  }).then((res: any) => {
    content.value = "";
    uidList.value = [];
    files.value = [];
    fileRef.value.resetFile();
    ElMessage({
      message: res.message,
      type: "success",
    });
    emits("getUserList");
    dialogVisible.value = false;
  });
};

const selectedUserId = ref("");
const userList = ref<
  {
    id: string;
    username: string;
    iconUrl: string;
  }[]
>([]);

const dialogVisible = ref(false);
const content = ref("");

const showDialog = () => {
  selectedUserId.value = "";
  // sendToUserId.value = id;
  dialogVisible.value = true;
};
defineExpose({
  showDialog,
});
onMounted(() => {
  getListUserInfo({}).then((res: any) => {
    console.log(res, "aa");
    userList.value = [];
    res.data.forEach((item: any) => {
      userList.value.push({
        id: item.id,
        username: item.username,
        iconUrl: item.iconUrl,
      });
    });
  });
});
</script>

<style scoped lang="less">
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.dialog-input {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  .label {
    margin: 10px;
  }
}
</style>
